const { user } = window.parent
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview',
}

// 1.3 创建裁剪区域
$image.cropper(options)
// 上传图片
$('.btn_upload').on('click', function () {
  $('.hidden[type="file"]')[0].click()
})
// 得到上传的图片
$('.hidden[type="file"]').on('change', function () {
  const fileAvat = $(this)[0].files[0]
  console.log(fileAvat)
  if (!fileAvat) {
    layui.layer.msg('上传失败')
    return
  }
  // 图片的 url 生成
  const avatUrl = URL.createObjectURL(fileAvat)
  console.log(avatUrl)
  $('#image').cropper('destroy').attr('src', avatUrl).cropper(options)
})
// 确认修改
$('[lay-filter="userAvat"]').on('submit', function (e) {
  e.preventDefault()
  const avatar = $image
    .cropper('getCroppedCanvas', {
      width: 100,
      height: 100,
    })
    .toDataURL('image/png')
  // 发起请求
  $.ajax({
    url: '/my/update/avatar',
    data: { avatar },
    type: 'POST'
  }).then(res => {
    // {
    //   "status": 0,
    //   "message": "更新头像成功！"
    // }
    const {status, message} = res
    if (status === 0 && message === '更新头像成功！') {
      user.info.user_pic = avatar
      window.parent.render(user.info)
      layui.layer.msg('更改成功')
    } else {
      layui.layer.msg('更改失败')
    }
  })
})
